<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷狗音乐</title>

    <style>
        /* 多用几种选择器 */
        body,
        p,
        ul {
            /* width: 100%; */
            margin: 0;
            padding: 0;
        }

        body {
            z-index: -10;
        }

        li {
            list-style: none;
        }

        .all {
            position: relative;
        }

        /* head-nav */
        .head-nav {
            background-color: #0062FF;

        }

        .head-nav-content {
            margin: 0 auto;
            width: 1000px;
            height: 80px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
        }

        .head-nav-content-left {
            /* width: 400px; */
            /* height: 80px; */
            /* background-color: aqua; */
            display: flex;
            flex-wrap: nowrap;
            /* justify-content: center; */
            align-items: center;
        }

        .head-nav-content-right {
            /* width: 400px; */
            /* height: 80px; */
            /* background-color: blueviolet; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .head-nav-content-left-logo {
            /* background-color: brown; */
            height: 38px;
        }

        .img-1-logo {
            width: 149px;
            height: 38px;
            margin: 0 40px 0 0;
        }

        .search-container {
            width: 280px;
            height: 30px;
            border-radius: 31px;
            box-sizing: border-box;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 31px;
            padding: 4px 10px 4px 40px;
            position: relative;
        }

        .search-logo {
            width: 15px;
            height: 15px;
            background: url(https://www.kugou.com/common/images/icon_search_white.png
) no-repeat;
            background-size: 100%;
            position: absolute;
            left: 15px;
            top: 8px;
            cursor: pointer;
            /* z-index: 1; */

        }

        .inpt-1-search {
            width: 230px;
            height: 22px;
            border: none;
            font-size: 14px;
            outline: none;
            /* background-color: rgba(77, 194, 255, 0); */
            /* border-radius: 0 31px 31px 0; */
            box-sizing: border-box;
            color: #fff;
            background-color: rgba(255, 255, 255, 0);
        }

        .right-text {
            height: 18px;
            margin: 0 30px 0 0;
            font-size: 14px;
            color: white;
            opacity: 0.9;
        }

        .right-text:hover {
            opacity: 1;
            cursor: pointer;
        }

        .line-1 {
            width: 1px;
            height: 14px;
            background-color: #fff;
            opacity: 0.5;
        }

        .login-button {
            margin: 0 32px;
            width: 90px;
            height: 30px;
            color: #0062FF;
            background-color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            cursor: pointer;
        }

        /* head-nav */

        /* middle-nav */
        .middle-nav-container {

            background: rgba(255, 255, 255, 0.5);
            position: absolute;
            z-index: 1;
            width: 100%;
            /* padding: 0 auto; */
        }

        .middle-nav {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1000px;
            height: 60px;



        }

        .middle {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 141px;
            height: 60px;
            cursor: pointer;
            font-size: 16px;
        }

        .middle:hover {
            color: #0062FF;
        }

        .active-1 {
            color: #fff;
            background-color: #0062FF;
            width: 94px;
            height: 34px;
            border-radius: 18px;
            text-align: center;
            line-height: 34px;
        }

        .more-container {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .drop-down {
            position: relative;
        }

        .drop-down:hover .more-container {
            color: #fff;
            background-color: #0062FF;
            width: 94px;
            height: 34px;
            border-radius: 18px;
            text-align: center;
            line-height: 34px;
            color: #fff;
        }

        .drop-down:hover .up-down {
            background: url(https://www.kugou.com/common/images/icon_arrow_down_white.png) no-repeat;
            transform: rotate(180deg);
            transform-origin: center center;
            width: 18px;
            height: 18px;
            background-size: 100%;
        }

        .drop-down:hover .song-list {
            display: block;
        }

        .up-down {
            background: url(https://www.kugou.com/common/images/icon_arrow_down_black.png) no-repeat;
            width: 18px;
            height: 18px;
            background-size: 100%;

        }

        .song-list {
            /* background-color: #fff; */
            background-color: #fff;
            position: absolute;
            /* z-index: 2; */
            left: calc(50% - 54px);
            top: 60px;
            border-radius: 8px;
            display: none;
            margin-top: 6px;

        }

        .song-list li {
            color: #000;
            width: 108px;
            height: 36px;
            line-height: 36px;
            display: block;
            text-align: center;
            font-size: 16px;


        }

        .song-list li:hover {
            color: #0062FF;
            width: 108px;
            height: 36px;
            line-height: 36px;
            display: block;
            text-align: center;
            font-size: 16px;

        }

        .angle-box {
            width: 100%;
            height: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: aqua; */
            position: absolute;
            top: -12px;
        }

        .angle {
            width: 0;
            height: 0;
            border: 6px solid rgba(255, 255, 255, 0);
            /* 给这个加一个盒子，就不会出现容易消失的问题了 */
            border-bottom: 6px solid #fff;
            /* position: absolute;
            left: calc(50% - 6px);
            top: -12px; */
        }

        /* middle-nav */

        /* lunbotu */
        .lunbotu {

            /* width: 1000px; */
            max-width: 100%;
            min-width: 1000px;
            height: 500px;
            /* margin: 0 auto; */
            /* background-color: aqua; */
            cursor: pointer;
            position: relative;
            /* z-index: -2; */
        }

        .lunbotu-img {
            /* margin-top:80px ; */
            width: 100%;
            height: 100%;
            position: relative;
            z-index: -3;

        }

        .lunbotu-img img {
            /* width: 100%; */
            height: 100%;
            transform: translateX(-50%);
            position: absolute;
            left: 50%;
            display: none;
            z-index: -2;
            /* transition: all 10s ease; */

        }

        .lunbotu-img .active-3 {
            display: block;
        }

        .lunbotu-part-box {
            /* background-color: red; */
            max-width: 100%;
            min-width: 1000px;
            width: 100%;
            height: 380px;
            position: absolute;
            top: 60px;
            /* left: 50%; */
            /* transform: translateX(-50%); */
            cursor: pointer;
            /* z-index: -1; */
        }

        .lunbotu-part-box:hover .lunbotu-part-left {
            display: block;
        }

        .lunbotu-part-box:hover .lunbotu-part-right {
            display: block;
        }


        .lunbotu-part-left {
            width: 90px;
            height: 90px;
            /* background-color: red; */
            background: url(https://www.kugou.com/common/images/icon_arrow_left.png) no-repeat;
            background-size: 100%;

            /* transform: rotate(180deg); */
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            /* z-index: 2; */

            /* transform: translateZ(100px); */
        }

        .lunbotu-part-right {
            width: 90px;
            height: 90px;
            /* background-color: red; */
            background: url(https://www.kugou.com/common/images/icon_arrow_right.png) no-repeat;
            background-size: 100%;
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            display: none;
            /* z-index: 2; */
        }

        .lunbotu-part-bottom {
            width: 100%;
            min-width: 1000px;
            height: 24px;
            position: absolute;
            bottom: 20px;
            /* background-color: red; */
            display: flex;
            justify-content: center;
            align-items: end;
        }

        .lunbotu-part-bottom .active-4 {
            width: 20px;
            height: 8px;
            margin: 0 8px;
            background-color: #fff;
            border-radius: 4px;
            opacity: 1;
        }

        .lunbotu-part-bottom li {
            width: 8px;
            height: 8px;
            margin: 0 7px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0.7;

        }

        /* lunbotu */

        /* bottom-nav */
        .bottom-nav-container {
            background: rgba(255, 255, 255, 0.5);
            /* background-color: brown; */
            position: absolute;
            bottom: 0;
            /* z-index: 1; */
            width: 100%;
            /* padding: 0 auto; */
        }

        .bottom-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1000px;
            height: 60px;
            margin: 0 auto;


        }

        .download {
            width: 260px;
            height: 46px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: rgba(15, 27, 46, 0.8);
        }

        .download:hover {
            /* color: rgb(15, 27, 46); */
            color: #000;
        }


        .line-2 {
            /* background-color: aqua;
                width: 20px;
                height: 20px; */
            /* display: block; */
            height: 18px;
            width: 12px;
            margin-top: 10px;
            border-right: 1px solid rgba(255, 255, 255, .2);
            border-right: 1px solid #fff \9;
            filter: alpha(opacity=20) \9;
        }

        .PC-img {
            width: 46px;
            height: 46px;
            margin-left: 5px;
            background: url(https://www.kugou.com/common/images/icon_download_pc_gray.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        .iPhone-img {
            width: 46px;
            height: 46px;
            margin-left: 5px;
            background: url(https://www.kugou.com/common/images/icon_download_iphone_gray.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        .Android-img {
            width: 46px;
            height: 46px;
            margin-left: 5px;
            background: url(https://www.kugou.com/common/images/icon_download_android_gray.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        .download:hover .PC-img {


            background: url(https://www.kugou.com/common/images/icon_download_pc_black.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        .download:hover .iPhone-img {

            background: url(https://www.kugou.com/common/images/icon_download_iphone_black.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        .download:hover .Android-img {

            background: url(https://www.kugou.com/common/images/icon_download_android_black.png) no-repeat;
            background-size: 46px;
            background-position: 5px center;
        }

        /* bottom-nav */
        /* main-container */
        .main-container {
            width: 1000px;
            height: 2464px;
            margin: 0 auto;
            font-size: 16px;
            color: #000;
            /* position: relative; */
        }

        .list-container {
            width: 1000px;
            height: 492px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .list-container-left {
            width: 640px;
            height: 492px;
            /* background-color: #0062FF; */
        }

        .list-container-right {
            width: 320px;
            height: 492px;
            /* background-color: #0062FF; */
        }

        .title-left {
            width: 640px;
            height: 50px;
            margin: 60px 0 20px;
            /* background-color: aqua; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .title-right {
            width: 320px;
            height: 50px;
            margin: 60px 0 20px;
            /* background-color: aqua; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .title-1 {
            margin: 0;
            padding: 0;
            width: 104px;
            height: 34px;
            font-size: 26px;
        }

        .more-song {
            width: auto;
            height: auto;
            font-size: 14px;
            font-weight: 400;
            color: #858585;
            background: url(https://www.kugou.com/common/images/icon_arrow_right_gray.png) no-repeat;
            background-size: 16px;
            background-position: right 2px;
            padding-right: 19px;
            cursor: pointer;
        }

        .left-list {
            width: 640px;
            height: 362px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .left-list-part-left {
            width: 320px;
            /* height: 300px; */
            /* background-color: aqua; */
        }

        .left-list-part-right {
            width: 290px;
            display: flex;
            flex-wrap: wrap;
            /* height: 300px; */
            /* background-color: aqua; */
        }

        .song-main {
            width: 320px;
            height: 320px;
            background: url(https://imgessl.kugou.com/custom/480/20200905/20200905235709844898.jpg) no-repeat;
            background-size: 100%;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .song-main:hover {

            /* background: url(https://imgessl.kugou.com/custom/480/20200905/20200905235709844898.jpg) no-repeat; */
            background-size: 106%;
            background-position: center center;

            /* transition: all 0.2s ease; */
            /* border-radius: 4px; */
        }

        .title-main {
            font-size: 14px;
            width: 100%;
            height: 40px;
            margin-top: 6px;
        }

        .title-sum {
            width: 72px;
            height: 24px;
            border-radius: 15px;
            bottom: 0;
            right: 0;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            color: #FFFFFF;
            /* background-color: aqua; */
            background: rgba(75, 84, 91, 0.4);
        }

        .title-sum-sp1 {
            background: url(https://www.kugou.com/common/images/icon_play_white.png) no-repeat;
            background-size: 103%;
            width: 12px;
            height: 12px;
            margin-right: 1px;
        }

        .pingmu {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }

        .pingmu-center-1 {
            width: 50px;
            height: 50px;
            background: url(https://www.kugou.com/common/images/icon_play_white.png) no-repeat;
            background-size: 100%;
            opacity: 0.9;
        }

        .song-main:hover .pingmu {
            opacity: 0.9;
        }

        .song-m-box {
            width: 50%;
            height: 176px;
            /* background-color: #0062FF; */
            display: flex;
        }

        .song-m-box-2 {
            justify-content: end;
        }

        .song-m-box-3 {
            margin-top: 15px;
        }

        .song-m-box-4 {
            margin-top: 15px;
            justify-content: end;
        }

        .song-box {
            width: 130px;
            /* height: 176px; */
            /* background-color: #0062FF; */
        }

        .song-m {
            width: 130px;
            height: 130px;
            position: relative;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .song-m:hover {
            background-size: 106%;
            background-position: center center;
        }

        .song-m:hover .pingmu {
            opacity: 0.9;
        }

        .song-m-1 {
            background: url(https://imgessl.kugou.com/v2/custom/75a7d4cb50aa0f1a3b0342382c644bc1.png
) no-repeat;
            background-size: 100%;
        }

        .song-m-2 {
            background: url(https://imgessl.kugou.com/custom/150/20220108/20220108095917466775.jpg) no-repeat;
            background-size: 100%;
        }

        .song-m-3 {
            background: url(https://imgessl.kugou.com/custom/150/20211202/20211202172334438834.jpg) no-repeat;
            background-size: 100%;
        }

        .song-m-4 {
            background: url(https://imgessl.kugou.com/soft/collection/150/20181105/20181105220604378163.jpg) no-repeat;
            background-size: 100%;
        }

        .right-list-part {
            width: 320px;
            height: 110px;
            display: flex;
            background: rgba(177, 179, 185, 0.04);
            border-radius: 4px;
            font-size: 16px;
        }

        .right-list-2 {
            margin-top: 16px;
        }

        .right-list-3 {
            margin-top: 16px;
        }

        .list-type {
            width: 110px;
            height: 110px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;

        }

        .list-type:hover {
            background-position: center center;
            background-size: 106%;
        }

        .list-type:hover .pingmu {
            opacity: 0.9;
        }

        .list-type-1 {
            background: url(https://www.kugou.com/common/images/rank_i1_v20.png) no-repeat;
            background-color: #F2A829;
            background-position: center center;
            background-size: 100%;
        }

        .list-type-2 {
            background: url(https://www.kugou.com/common/images/rank_i2_v20.png) no-repeat;
            background-color: #63A8F3;
            background-position: center center;
            background-size: 100%;
        }

        .list-type-3 {
            background: url(https://www.kugou.com/common/images/rank_i3_v20.png) no-repeat;
            background-color: #8A72E7;
            background-position: center center;
            background-size: 100%;
        }

        .right-list-box {
            margin: 0 0 0 24px;
            padding: 0 12px 0 0;
            /* background-color: #8A72E7; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;
        }

        .right-list-box li {
            width: 174px;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .right-list-box .sp3 {
            font-weight: bold;
        }

        /* main-container */
        /* tools */
        .tools {
            width: 69.33px;
            height: 207.33px;
            background-color: red;
            z-index: 99;
            cursor: pointer;
            background: #fff;
            border-radius: 8px;
            border: 1px solid rgba(177, 179, 185, 0.3);
        }

        .tools-active-1 {
            position: absolute;
            top: 770px;
            right: 50px;
        }

        .tools-active-2 {
            position: fixed;
            top: 342px;
            right: 50px;
        }

        .tool {
            padding: 10px 0;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .tools .p1 {
            margin: 0;
            padding: 0;
            color: #556677;
            font-size: 12px;
            /* white-space: nowarp; */
        }

        .tools .tool-imgs {
            width: 32px;
            height: 32px;
            background-color: #fff;
        }

        .tool-imgs-download {
            background: url(https://www.kugou.com/common/images/icon_rs_i1.png) no-repeat;
            background-position: center center;
            background-size: 100%;
            position: relative;
        }

        .tool-imgs-advice {
            background: url(https://www.kugou.com/common/images/icon_rs_i3.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .tool-imgs-goBack {
            background: url(https://www.kugou.com/common/images/icon_rs_i4.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .tool-imgs-download:hover {
            background: url(https://www.kugou.com/common/images/icon_rs_i1_active_v20.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .tool-download:hover .QRcode {
            display: block;
        }

        .tool-imgs-advice:hover {
            background: url(https://www.kugou.com/common/images/icon_rs_i3_active_v20.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .tool-imgs-goBack:hover {
            background: url(https://www.kugou.com/common/images/icon_rs_i4_active_v20.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .QRcode {
            padding: 10px;
            position: absolute;
            top: 0;
            right: 100%;
            transform: translateX(-15px);
            background-color: #fff;
            border-radius: 8px;
            border: 1px solid rgba(177, 179, 185, 0.3);
            display: none;
        }

        .QRcode-img {
            background: url(https://www.kugou.com/common/images/qrcode4home_download.png);
            background-position: center center;
            background-size: 100%;
            width: 110px;
            height: 110px;
        }

        .QRcode .p2 {
            width: 110px;
            height: 16px;
            margin: 10px 0 0;
            font-size: 12px;
            text-align: center;
        }

        /* tools */
        /* new-songs */
        .new-songs {
            width: 1000px;
            /* height: 504px; */
            /* background-color: #858585; */
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            /* align-items: center; */
        }

        .new-songs-part-left {
            width: 660px;
            height: 504px;
            /* background-color: #858585; */
        }

        .new-songs-part-right {
            width: 320px;
            height: 504px;
            /* background-color: #858585; */
        }

        .new-songs-part-left-title {
            margin: 60px 0 20px;
            font-size: 16px;
            color: #000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 50px;
            cursor: pointer;
            /* background-color: #0062FF; */
        }

        .new-songs-part-left-title-left-part-1 {
            /* width: 104px;
            height: 34px; */
            font-size: 26px;
        }

        .new-songs-part-left-title-left-part-2 {
            margin: 4px 0 0 50px;
        }

        .new-songs-part-left-title-left-part-2 .country {
            font-size: 14px;
            margin: 0 14px 0 0;
            padding: 0 8px 0 12px;
        }

        .new-songs-part-left-title-left {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .new-songs-part-left-title-right {
            font-size: 13px;
            margin: 0 22px 0 0;
        }

        .new-songs-list {

            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            /* align-items: baseline; */
            flex-wrap: wrap;
            /* align-items: stretch; */
        }

        .new-songs-list li {
            width: 304px;
            height: 62px;
            padding: 0 16px 0 0;
            flex-shrink: 0;
            margin-top: 16px;
            display: flex;
            align-items: center;
            /* margin: auto 0; */
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .new-songs-list li:nth-child(1) {
            margin: 0;
        }

        .new-songs-list li:nth-child(2) {
            margin: 0;
        }

        .new-songs-list li:hover .item-img {

            background-position: center center;
            background-size: 106%;
        }

        .item-img {
            width: 62px;
            height: 62px;
            background: url(https://imgessl.kugou.com/stdmusic/240/20250121/20250121212031689827.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
            /* display: inline-; */
        }

        .st2 {
            height: 40px;
            margin: 0 0 0 14px;
        }

        .st2-p1 {
            width: 163px;
            height: 18px;
            line-height: 18px;
            /* text-align: center; */
            font-size: 14px;
        }

        .st2-p2 {
            width: 163px;
            height: 16px;
            line-height: 16px;
            margin: 6px 0 0;
            /* text-align: center; */
            font-size: 12px;
            color: rgb(0, 0, 0, 0.7);
        }

        .new-songs-list li:hover {
            background: rgba(0, 169, 255, 0.02);
        }

        .new-songs-list li:hover .st2-p1 {
            color: #0062FF;
        }

        .new-songs-list li:hover .st2-p2 {
            color: #0062FF;
        }

        .icon-box {
            width: 65px;
            height: 24px;
            display: flex;
            justify-content: flex-end;
        }

        .icon-box .icon-1 {
            width: 24px;
            height: 24px;
            background: url(https://www.kugou.com/common/images/icon_play_style2_black.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-box .icon-2 {
            width: 24px;
            height: 24px;
            margin: 0 0 0 8px;
            background: url(https://www.kugou.com/common/images/icon_download_style2_black.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-box .icon-1:hover {
            background: url(https://www.kugou.com/common/images/icon_play_style2_blue_v20.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-box .icon-2:hover {
            background: url(https://www.kugou.com/common/images/icon_download_style2_blue.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .country {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 400;
            border-radius: 15px;
        }

        .country .bof {
            width: 14px;
            height: 14px;
            background: url(https://www.kugou.com/common/images/icon_play_little_blue_v20.png) no-repeat;
            background-size: 100%;
            opacity: 0;
            margin-top: 1px;
            margin-left: 2px;
        }

        .active-5 {
            background: rgba(0, 169, 255, 0.1);
            color: #0062FF;
        }

        .active-5 .bof {
            opacity: 1;
        }

        .new-songs-part-left-title-left-part-2 {
            display: flex;

        }

        .new-songs-part-right-title {
            width: 320px;
            height: 50px;
            margin: 60px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .MV {
            font-size: 26px;
            cursor: pointer;
        }

        .MV-1 {
            width: 320px;
            cursor: pointer;
        }

        .MV-2 {
            width: 320px;
            margin-top: 14px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }

        .MV-img {
            transition: all 0.2s ease;
            position: relative;
        }

        .MV-img:hover .pingmu {
            opacity: 0.9;
        }

        .MV-img-1 {
            width: 320px;
            height: 180px;
            background: url(https://imgessl.kugou.com/mvhdpic/400/20250124/20250124112150632870.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .MV-img-2 {
            width: 150px;
            height: 84px;
            background: url(https://imgessl.kugou.com/mvhdpic/400/20250124/20250124130015841244.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .MV-img-3 {
            width: 150px;
            height: 84px;
            background: url(https://imgessl.kugou.com/mvhdpic/400/20250125/20250125204728958483.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .MV-img:hover {
            background-position: center center;
            background-size: 106%;
        }

        .MV-title {
            width: 100%;
            margin-top: 6px;
        }

        .MV-title-1 {
            width: 100%;
            font-size: 14px;
        }

        .MV-title-2 {
            width: 100%;
            margin: 2px;
            font-size: 12px;
            color: rgb(0, 0, 0, 0.7);
        }

        /* new-songs */
        /* listen-list */
        .listen-list-title {
            width: 1000px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 60px 0 20px;
        }

        .listen-list-title-left {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .listen-list-title-left-part-1 {
            font-size: 26px;
            cursor: pointer;
        }

        .listen-list-title-left-part-2 {
            margin: 4px 0 0 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .listen-list-title-left-part-2 li {
            margin: 0 14px 0 0;
            padding: 0 12px;
            font-size: 14px;
            cursor: pointer;
            /* text-align: center; */
        }

        .listen-list-title-left-part-2 .active-6 {
            color: rgb(0, 98, 255);
            background: rgba(0, 169, 255, 0.1);
            border-radius: 15px;
        }

        .audio-list {
            width: 1000px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .audio-list li {
            width: 304px;
            height: 62px;
            padding: 0 16px 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 16px;
            cursor: pointer;
        }

        .audio-list li:nth-child(1) {
            margin: 0;
        }

        .audio-list li:nth-child(2) {
            margin: 0;
        }

        .audio-list li:nth-child(3) {
            margin: 0;
        }

        .audio-img {
            width: 62px;
            height: 62px;
            background: url(https://imgessl.kugou.com/stdmusic/150/20241204/20241204170929168875.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .audio-title {
            width: 163px;
            margin-left: 14px;
        }

        .audio-title-1 {
            width: 100%;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .audio-title-2 {
            width: 100%;
            font-size: 12px;
            margin-top: 6px;
            color: rgb(0, 0, 0, 0.7);
        }

        .audio-bo {
            width: 65px;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .audio-s1 {
            width: 12px;
            height: 12px;
            background: url(https://www.kugou.com/common/images/icon_play_style2_black.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .audio-s2 {
            font-size: 12px;
        }

        .audio-list li:hover {
            color: #0062FF;
        }

        .audio-list li:hover .audio-img {
            background-position: center center;
            background-size: 106%;
        }

        .audio-list li:hover .audio-title-2 {
            color: #0062FF;
        }

        .audio-list li:hover .audio-s1 {
            background: url(https://www.kugou.com/common/images/icon_play_style2_blue_v20.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        /* listen-list */
        /* Popular-channels */
        .Popular-channels-title {
            width: 1000px;
            height: 50px;
            margin: 60px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .Popular-channels-title-left {
            font-size: 26px;
        }

        .channels-items-list {
            width: 1000px;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .channels-items {
            width: 150px;
            cursor: pointer;
            /* height: 150px; */
        }

        .channels-img {
            width: 150px;
            height: 150px;
            background: url(https://imgessl.kugou.com/fmlogov2/480/20220215174138171104.png) no-repeat;
            background-position: center center;
            background-size: 100%;
            border-radius: 4px;
            transition: all 0.2s ease;
            position: relative;
        }

        .channels-title {
            width: 100%;
            margin-top: 6px;
            font-size: 14px;
            height: 40px;
        }

        .channels-img:hover .pingmu {
            opacity: 0.9;
        }

        .channels-img:hover {
            background-position: center center;
            background-size: 106%;
        }

        /* Popular-channels */
        /* Popular-singers */
        .Popular-singers-title {
            width: 1000px;
            height: 50px;
            margin: 60px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .Popular-singers-title-left {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .Popular-singers-title-left-part-1 {
            font-size: 26px;
            cursor: pointer;
        }

        .Popular-singers-title-left-part-2 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 4px 0 0 50px;
        }

        .Popular-singers-title-left-part-2 li {
            flex-shrink: 0;
            margin: 0 14px 0 12px;
            padding: 0 12px;
            cursor: pointer;
        }

        .active-7 {
            background: rgba(0, 169, 255, 0.1);
            color: #0062FF;
            border-radius: 15px;
        }

        .singer-item-list {
            width: 1000px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .singer-item {
            width: 140px;

        }

        .singer-img {
            width: 140px;
            height: 140px;
            background: url(https://imgessl.kugou.com/uploadpic/softhead/240/20230512/20230512210703652.jpg) no-repeat;
            background-position: center center;
            background-size: 100%;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .singer-img:hover {
            background-position: center center;
            background-size: 106%;
        }

        .singer-title {
            text-align: center;
            width: 100%;
            font-size: 14px;
            margin-top: 10px;
            cursor: pointer;
        }

        /* Popular-singers */
        /* Recommended-content */
        .Recommended-content-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 60px 0 20px;
        }

        .Recommended-content-title-left {
            font-size: 26px;
            cursor: pointer;
        }

        .Recommended-content-title-right {
            font-size: 13px;
        }

        .Recommended-content-list {
            width: 1000px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 182px;
            flex-wrap: wrap;
        }

        .content-item {
            width: 140px;
            height: 50px;
            background: rgb(177 179 185 / 10%);
            flex-shrink: 0;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }

        /* Recommended-content */
        /* Collaboration-Connection */
        .Collaboration-Connection-title {
            width: 1000px;
            height: 50px;
            margin: 60px 0 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 26px;
            cursor: pointer;
        }

        .Collaboration-Connection-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            width: 1000px;
            height: 116px;
            cursor: pointer;

        }

        .Collaboration-Connection-list li {
            width: 140px;
            height: 50px;
            background: rgb(177 179 185 / 10%);
            flex-shrink: 0;
            line-height: 50px;
            text-align: center;
        }

        /* Collaboration-Connection */
        /* white-part */
        .white-part {
            width: 100%;
            min-width: 1000px;
            height: 70px;
        }

        /* white-part */
        /* black-part */
        .black-part {
            width: 100%;
            min-width: 1000px;
            height: 326px;
            background: #2C323B;
            color: #B1B3B9;
            padding-bottom: 60px;
        }

        /* icon-item-list */
        .icon-item-list {
            width: 100%;
            min-width: 1000px;
            color: #B1B3B9;
            padding: 40px 0 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin: 0 10px;
        }

        .icon-img {
            width: 70px;
            height: 70px;
        }

        .icon-title {
            font-size: 12px;
        }

        .icon-item:hover .icon-title {
            color: #fff;
        }

        .icon-item-1 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_tme.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-1:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_tme_blue.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-2 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i2.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-2:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i2_blue.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-3 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i3.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-3:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i3_blue.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-4 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i4.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-4:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i4_blue.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-5 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i5.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-5:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i5_active.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-6 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i7.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-6:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i7_active.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-7 .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i8.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        .icon-item-7:hover .icon-img {
            background: url(https://www.kugou.com/common/images/icon_cmfoot_i8_active.png) no-repeat;
            background-position: center center;
            background-size: 100%;
        }

        /* icon-item-list */


        /* black-part */
    </style>

</head>

<body>
    <!-- 全部做完 -->
    <!-- flex布局 -->
    <!-- 多使用flex布局的各种属性，尽量做到效果完全一致，从而熟悉各种属性 -->
    <!-- 尝试css文件和js文件的的引入，不用所有东西都写在一个文件里面 -->
    <div class="all">
        <!-- 头部导航 -->
        <div class="head-nav">
            <div class="head-nav-content">
                <div class="head-nav-content-left">
                    <div class="head-nav-content-left-logo">
                        <img class="img-1-logo" src="https://www.kugou.com/common/images/icon_logo_v20.png" alt="">
                    </div>
                    <div class="search-container">
                        <div class="search-logo"></div>
                        <input class="inpt-1-search" type="text">
                    </div>
                </div>
                <div class="head-nav-content-right">
                    <div class="text-1-musician right-text">音乐人</div>
                    <div class="text-2-AudioCreation right-text">音频创作</div>
                    <div class="text-3-vip right-text">VIP会员</div>
                    <div class="line-1"></div>
                    <div class="login-button">登录</div>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="lunbotu">
            <!-- 中部导航 -->
            <div class="middle-nav-container">
                <div class="middle-nav">
                    <div class="middle-nav-home middle">
                        <p class="middlekid active-1">首页</p>
                    </div>
                    <div class="middle-nav-list middle">
                        <p class="middlekid">榜单</p>
                    </div>
                    <div class="middle-nav-listen middle">
                        <p class="middlekid">听书</p>
                    </div>
                    <div class="middle-nav-live middle">
                        <p class="middlekid">直播</p>
                    </div>
                    <div class="middle-nav-download middle">
                        <p class="middlekid">下载酷狗</p>
                    </div>
                    <div class="middle-nav-cooperation middle">
                        <p class="middlekid">商务合作</p>
                    </div>
                    <div class="middle-nav-more middle drop-down">
                        <div class="more-container">
                            <div class="text-more">更多</div>
                            <div class="up-down"></div>

                            <ul class="song-list">
                                <div class="angle-box">
                                    <div class="angle"></div>
                                </div>

                                <li>频道</li>
                                <li>MV</li>
                                <li>歌单</li>
                                <li>歌手</li>
                                <li>专辑</li>
                                <li>煲机</li>
                            </ul>

                        </div>

                    </div>
                </div>
            </div>
            <div class="lunbotu-part-box">

                <div class="lunbotu-part-left"></div>
                <div class="lunbotu-part-right"></div>

                <ul class="lunbotu-part-bottom">
                    <li class="active-4"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="lunbotu-img">
                <img class="lunbo active-3" src="https://imgessl.kugou.com/commendpic/20241202/20241202194359867006.jpg"
                    alt="">
                <img class="lunbo" src="https://imgessl.kugou.com/commendpic/20250116/20250116210518138597.jpg" alt="">
                <img class="lunbo" src="https://imgessl.kugou.com/commendpic/20250116/20250116204113505521.jpg" alt="">
                <img class="lunbo" src="https://imgessl.kugou.com/commendpic/20250116/20250116203153984889.jpg" alt="">
            </div>
            <!-- 底部导航 -->
            <div class="bottom-nav-container">
                <div class="bottom-nav">
                    <div class="download">
                        <div class="PC-img"></div>
                        下载电脑版
                    </div>
                    <span class="line-2"></span>
                    <div class="download">
                        <div class="iPhone-img"></div>
                        下载iPhone版
                    </div>
                    <span class="line-2"></span>
                    <div class="download">
                        <div class="Android-img"></div>
                        下载Android版
                    </div>
                </div>
            </div>

        </div>
        <!-- 主要内容 -->
        <div class="main-container">
            <!-- 工具栏 -->
            <div class="tools tools-active-1">
                <div class="tool-download tool">
                    <div class="QRcode">
                        <div class="QRcode-img"></div>
                        <p class="p2">下载手机酷狗</p>
                    </div>
                    <div class="tool-imgs tool-imgs-download"></div>
                    <p class="p1">下载酷狗</p>
                </div>
                <div class="tool-advice tool">
                    <div class="tool-imgs tool-imgs-advice"></div>
                    <p class="p1">意见反馈</p>
                </div>
                <div class="tool-goBack tool">
                    <div class="tool-imgs tool-imgs-goBack"></div>
                    <p class="p1">返回顶部</p>
                </div>
            </div>
            <!-- 精选歌单 -->
            <div class="list-container">
                <div class="list-container-left">
                    <div class="title-left">
                        <h3 class="title-1">精选歌单</h3>
                        <div class="more-song">更多</div>
                    </div>
                    <div class="left-list">
                        <div class="left-list-part-left">
                            <div class="song-main">
                                <div class="title-sum">
                                    <span class="title-sum-sp1"></span>
                                    <span class="title-sum-sp2">50.5万</span>
                                </div>
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <div class="title-main">
                                冷媚 | 韩国男歌手充满魅力的磁性嗓音
                            </div>
                        </div>
                        <div class="left-list-part-right">
                            <div class="song-m-box song-m-box-1">
                                <div class="song-box song-box-1">
                                    <div class="song-m song-m-1">
                                        <div class="title-sum">
                                            <span class="title-sum-sp1"></span>
                                            <span class="title-sum-sp2">284.6万</span>
                                        </div>
                                        <div class="pingmu">
                                            <div class="pingmu-center-1"></div>
                                        </div>
                                    </div>
                                    <div class="title-main">港式R&B | 坚尼地城的夕阳时分</div>
                                </div>
                            </div>
                            <div class="song-m-box song-m-box-2">
                                <div class="song-box song-box-2">
                                    <div class="song-m song-m-2">
                                        <div class="title-sum">
                                            <span class="title-sum-sp1"></span>
                                            <span class="title-sum-sp2">429.3万</span>
                                        </div>
                                        <div class="pingmu">
                                            <div class="pingmu-center-1"></div>
                                        </div>
                                    </div>
                                    <div class="title-main">凹凸世界（保证全，没有纯音乐）</div>
                                </div>
                            </div>
                            <div class="song-m-box song-m-box-3">
                                <div class="song-box song-box-3">
                                    <div class="song-m song-m-3">
                                        <div class="title-sum">
                                            <span class="title-sum-sp1"></span>
                                            <span class="title-sum-sp2">1475.9万</span>
                                        </div>
                                        <div class="pingmu">
                                            <div class="pingmu-center-1"></div>
                                        </div>
                                    </div>
                                    <div class="title-main">【情歌Rap】轻快旋律抓耳Hook</div>
                                </div>
                            </div>
                            <div class="song-m-box song-m-box-4">
                                <div class="song-box song-box-4">
                                    <div class="song-m song-m-4">
                                        <div class="title-sum">
                                            <span class="title-sum-sp1"></span>
                                            <span class="title-sum-sp2">64.3万</span>
                                        </div>
                                        <div class="pingmu">
                                            <div class="pingmu-center-1"></div>
                                        </div>
                                    </div>
                                    <div class="title-main">韩语R&B♪灌满温柔的动情小节奏</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-container-right">
                    <div class="title-right">
                        <h3 class="title-1">热门榜单</h3>
                        <div class="more-song">更多</div>
                    </div>
                    <div class="right-list">
                        <div class="right-list-1 right-list-part">
                            <div class="list-type list-type-1">
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <ul class="right-list-box">
                                <li>
                                    <span class="sp3">1.</span>
                                    <span>Michita - Cry For Me (feat. Ami)</span>
                                </li>
                                <li>
                                    <span class="sp3">2.</span>
                                    <span>半吨兄弟 - 恰似你的温柔</span>
                                </li>
                                <li>
                                    <span class="sp3">3.</span>
                                    <span>田园 - 怪我不死心</span>
                                </li>
                            </ul>
                        </div>
                        <div class="right-list-2 right-list-part">
                            <div class="list-type list-type-2">
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <ul class="right-list-box">
                                <li>
                                    <span class="sp3">1.</span>
                                    <span>G.E.M. 邓紫棋 - 唯一</span>
                                </li>
                                <li>
                                    <span class="sp3">2.</span>
                                    <span>陶喆 - 爱我还是他</span>
                                </li>
                                <li>
                                    <span class="sp3">3.</span>
                                    <span>田园 - 先说爱的人为什么先离开</span>
                                </li>
                            </ul>
                        </div>
                        <div class="right-list-3 right-list-part">
                            <div class="list-type list-type-3">
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <ul class="right-list-box">
                                <li>
                                    <span class="sp3">1.</span>
                                    <span>丁禹兮 - 消散对白</span>
                                </li>
                                <li>
                                    <span class="sp3">2.</span>
                                    <span>贺仙人 - 你的</span>
                                </li>
                                <li>
                                    <span class="sp3">3.</span>
                                    <span>万向乐队 - 野百合也有春天</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 新歌首发 -->
            <div class="new-songs">
                <!-- 左边部分 -->
                <div class="new-songs-part-left">
                    <div class="new-songs-part-left-title">
                        <div class="new-songs-part-left-title-left">
                            <div class="new-songs-part-left-title-left-part-1">新歌首发</div>
                            <div class="new-songs-part-left-title-left-part-2">
                                <span class="country active-5">
                                    华语
                                    <div class="bof"></div>
                                </span>
                                <span class="country">
                                    欧美
                                    <div class="bof"></div>
                                </span>
                                <span class="country">
                                    韩国
                                    <div class="bof"></div>
                                </span>
                                <span class="country">
                                    日本
                                    <div class="bof"></div>
                                </span>
                            </div>
                        </div>
                        <div class="new-songs-part-left-title-right">
                            <span class="ye-1">1</span>
                            <span class="ye-2">/</span>
                            <span class="ye-3">3</span>
                            <!-- 1/3 -->
                        </div>
                    </div>
                    <ul class="new-songs-list">
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                        <li>
                            <div class="item-img"></div>
                            <div class="st2">
                                <div class="st2-p1">还好有你在</div>
                                <div class="st2-p2">张远</div>
                            </div>
                            <div class="icon-box">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 右边部分 -->
                <div class="new-songs-part-right">
                    <div class="new-songs-part-right-title">
                        <div class="MV">推荐MV</div>
                        <div class="more-song">更多</div>
                    </div>
                    <div class="MV-1">
                        <div class="MV-img MV-img-1">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="MV-title">
                            <div class="MV-title-1">4X4</div>
                            <div class="MV-title-2">Travis Scott</div>
                        </div>
                    </div>
                    <div class="MV-2">
                        <div class="MV-2-left">
                            <div class="MV-img MV-img-2">
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <div class="MV-title">
                                <div class="MV-title-1">Fat Juicy & Wet</div>
                                <div class="MV-title-2">Bruno Mars、Sexyy Red</div>
                            </div>
                        </div>
                        <div class="MV-2-right">
                            <div class="MV-img MV-img-3">
                                <div class="pingmu">
                                    <div class="pingmu-center-1"></div>
                                </div>
                            </div>
                            <div class="MV-title">
                                <div class="MV-title-1">Guilty</div>
                                <div class="MV-title-2">Teddy Swims</div>
                            </div>
                        </div>
                        <!-- <div class="pingmu">
                            <div class="pingmu-center-1"></div>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- 听书精选 -->
            <div class="listen-list">
                <div class="listen-list-title">
                    <div class="listen-list-title-left">
                        <div class="listen-list-title-left-part-1">听书精选</div>
                        <ul class="listen-list-title-left-part-2">
                            <li class="audio active-6">热门</li>
                            <li class="audio">小说</li>
                            <li class="audio">儿童</li>
                            <li class="audio">相声</li>
                            <li class="audio">情感</li>
                        </ul>
                    </div>
                    <div class="listen-list-title-right more-song">更多</div>
                </div>
                <ul class="audio-list">
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>
                    <li>
                        <div class="audio-img"></div>
                        <div class="audio-title">
                            <div class="audio-title-1">凡人修仙传｜动漫剧情抢先听</div>
                            <div class="audio-title-2">微媒有道</div>
                        </div>
                        <div class="audio-bo">
                            <span class="audio-s1"></span>
                            <span class="audio-s2">8057.3万</span>
                        </div>
                    </li>

                </ul>
            </div>
            <!-- 热门频道 -->
            <div class="Popular-channels">
                <div class="Popular-channels-title">
                    <div class="Popular-channels-title-left">热门频道</div>
                    <div class="more-song">更多</div>
                </div>
                <ul class="channels-items-list">
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                    <li class="channels-items">
                        <div class="channels-img">
                            <div class="pingmu">
                                <div class="pingmu-center-1"></div>
                            </div>
                        </div>
                        <div class="channels-title">百听不厌英文歌</div>
                    </li>
                </ul>

            </div>
            <!-- 热门歌手 -->
            <div class="Popular-singers">
                <div class="Popular-singers-title">
                    <div class="Popular-singers-title-left">
                        <div class="Popular-singers-title-left-part-1">热门歌手</div>
                        <ul class="Popular-singers-title-left-part-2">
                            <li class="singer active-7">华语</li>
                            <li class="singer">欧美</li>
                            <li class="singer">日韩</li>
                        </ul>
                    </div>
                    <div class="more-song">更多</div>
                </div>
                <ul class="singer-item-list">
                    <li class="singer-item">
                        <div class="singer-img"></div>
                        <div class="singer-title">
                            Michael Jackson
                        </div>
                    </li>
                    <li class="singer-item">
                        <div class="singer-img"></div>
                        <div class="singer-title">
                            Michael Jackson
                        </div>
                    </li>
                    <li class="singer-item">
                        <div class="singer-img"></div>
                        <div class="singer-title">
                            Michael Jackson
                        </div>
                    </li>
                    <li class="singer-item">
                        <div class="singer-img"></div>
                        <div class="singer-title">
                            Michael Jackson
                        </div>
                    </li>
                    <li class="singer-item">
                        <div class="singer-img"></div>
                        <div class="singer-title">
                            Michael Jackson
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 推荐内容 -->
            <div class="Recommended-content">
                <div class="Recommended-content-title">
                    <div class="Recommended-content-title-left">推荐内容</div>
                    <div class="Recommended-content-title-right">1/2</div>
                </div>
                <ul class="Recommended-content-list">
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                    <li class="content-item">隋唐演义</li>
                </ul>
            </div>
            <!-- 合作链接 -->
            <div class="Collaboration-Connection">
                <div class="Collaboration-Connection-title">合作链接</div>
                <ul class="Collaboration-Connection-list">
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                    <li>QQ音乐</li>
                </ul>
            </div>
        </div>
        <!-- 白色部分 -->
        <div class="white-part"></div>
        <!-- 黑色部分 -->
        <div class="black-part">
            <ul class="icon-item-list">
                <li>
                    <div class="icon-item icon-item-1">
                        <div class="icon-img"></div>
                        <div class="icon-title">腾讯音乐娱乐集团</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-2">
                        <div class="icon-img"></div>
                        <div class="icon-title">腾讯音乐人</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-3">
                        <div class="icon-img"></div>
                        <div class="icon-title">酷狗音乐人</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-4">
                        <div class="icon-img"></div>
                        <div class="icon-title">音乐推</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-5">
                        <div class="icon-img"></div>
                        <div class="icon-title">5sing原创音乐</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-6">
                        <div class="icon-img"></div>
                        <div class="icon-title">听歌识曲</div>
                    </div>
                </li>
                <li>
                    <div class="icon-item icon-item-7">
                        <div class="icon-img"></div>
                        <div class="icon-title">歌叽歌叽</div>
                    </div>
                </li>
            </ul>
        </div>


    </div>
</body>

<script>
    var middle = document.querySelectorAll('.middle');
    // console.log(middle);
    function remove1() {
        for (var i = 0; i < middle.length - 1; i++) {
            var firstChild = middle[i].firstElementChild
            firstChild.classList.remove('active-1')
        }
    }


    for (var i = 0; i < middle.length - 1; i++) {
        middle[i].onclick = (function () {
            // console.log(this);
            remove1();

            var firstChild = this.firstElementChild


            firstChild.classList.add('active-1'); // 切换类名
        })
    }

    // 轮播图实现
    var i = 0;
    var now = 0;
    var imgs = document.querySelectorAll('.lunbo');
    // console.log(imgs,"imgs");
    var lis = document.querySelector(".lunbotu-part-bottom").querySelectorAll('li')
    // console.log(lis,"lis");
    var left = document.querySelector(".lunbotu-part-left")
    // console.log(left,"left");
    var right = document.querySelector(".lunbotu-part-right")
    // console.log(right,"right");
    // console.log(-3%4);

    // for(var k=0;k<lis.length;k++){
    //     lis[k].index = k;
    // }

    function getNow(i) {

        if (i >= 0) {
            return i % 4;
        } else {
            var k = i % 4
            return k < 0 ? k + 4 : k
        }
    }
    function remove_lunbo() {
        for (var j = 0; j < imgs.length; j++) {
            imgs[j].classList.remove("active-3");
            lis[j].classList.remove("active-4")
        }
    }


    function light(i) {
        remove_lunbo();
        imgs[i].classList.add("active-3");
        lis[i].classList.add("active-4")

    }



    var set1 = setInterval(() => {
        light(getNow(++i));
    }, 3000)

    left.onclick = (() => {
        light(getNow(--i));
        // console.log(i);

    })
    right.onclick = (() => {
        light(getNow(++i));
    })

    for (var h = 0; h < lis.length; h++) {
        lis[h].index = h
        // console.log("存放录");

        lis[h].onmouseenter = (function () {
            i = this.index
            clearInterval(set1)
            light(getNow(i));
        })
        lis[h].onmouseleave = (function () {
            set1 = setInterval(() => {
                light(getNow(++i));
            }, 3000)
        })
    }

    //工具栏实现
    var tools = document.querySelector(".tools")
    console.log(tools);

    var set2 = setInterval(() => {
        // console.log(document.documentElement.scrollTop);

        if (document.documentElement.scrollTop >= 400) {
            tools.classList.remove("tools-active-1")
            tools.classList.add("tools-active-2")
        } else {
            tools.classList.remove("tools-active-2")
            tools.classList.add("tools-active-1")
        }
    }, 5)

    var goBack = document.querySelector(".tool-goBack")
    goBack.onclick = (() => {
        window.scrollTo({
            top: 0,
            // behavior: "smooth"
        })
    })


    var countrys = document.querySelectorAll(".country");
    function removeCountry() {
        for (var i = 0; i < countrys.length; i++) {
            countrys[i].classList.remove("active-5")
        }
    }
    for (var i = 0; i < countrys.length; i++) {
        countrys[i].onmouseenter = (function () {
            removeCountry()
            this.classList.add("active-5")
        })

    }

    var audios = document.querySelectorAll(".audio");
    function removeAudio() {
        for (var i = 0; i < audios.length; i++) {
            audios[i].classList.remove("active-6")
        }
    }
    for (var i = 0; i < audios.length; i++) {
        audios[i].onmouseenter = (function () {
            removeAudio()
            this.classList.add("active-6")
        })

    }

    var singers = document.querySelectorAll(".singer");
    function removeSinger() {
        for (var i = 0; i < singers.length; i++) {
            singers[i].classList.remove("active-7")
        }
    }
    for (var i = 0; i < singers.length; i++) {
        singers[i].onmouseenter = (function () {
            removeSinger()
            this.classList.add("active-7")
        })

    }
</script>

</html>